<template>
  <div class="yk-calendar">
    <div class="day gray">
      <span>周一</span>
      <span>周二</span>
      <span>周三</span>
      <span>周四</span>
      <span>周五</span>
      <span>周六</span>
      <span>周日</span>
    </div>
    <div class="date">
      <span v-for="(v,i) in dateList" :key="i" :class="{'gray': v.gray, 'actived': v.actived}" @click="() => onDateSelect(v, i)">
        <span>{{v.d}}</span>
      </span>
    </div>
    <span class="pull-btn"></span>
  </div>
</template>

<script>
import { ref } from '@vue/reactivity'
import { watch } from '@vue/runtime-core'
export default {
  props: {
    date: Date
  },
  setup(props, {emit}){
    let dateList = ref([
      {d: '30', gray: true},
      {d: '1', gray: false},
      {d: '2', gray: false},
      {d: '3', gray: false},
      {d: '4', gray: false},
      {d: '5', gray: false},
      {d: '6', gray: false}
    ])
    const setOneRowDate = timestamp => {
      let mapMonthDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
      let year = timestamp.getFullYear()
      let month = timestamp.getMonth()
      let day = timestamp.getDay()
      let date_ = timestamp.getDate()
      if (year % 4 === 0) mapMonthDays[1] = 29 // 闰年的2月份为29天
      if (day === 0) day = 7 // 该程序周日非第一天
      // 当月天数
      const monthLen = mapMonthDays[month]
      for (let i = 0; i < 7; i++) {
        let _d = date_ - day + 1 + i,
            y = year, m = month, d = _d
        // 下个月
        if (_d > monthLen) {
          if (month === 11) {
            m = 0
            y = year + 1
          } else {
            m = month + 1
          }
          d = _d - monthLen
        }
        // 上个月
        else if (_d < 1) {
          if (month === 0) {
            m = 11
            y = year - 1
          } else {
            m = month - 1
          }
          d = mapMonthDays[m] - day + 1 + i + date_
        }
        dateList.value[i] = {
          y,
          m: m + 1, // 月份是从0算起，所以需要+1
          d,
          gray: _d > monthLen || _d < 1,
          actived: date_ === _d
        }
      }
    }
    setOneRowDate(props.date)
    // 监听props参数时下面该写法无效
    // watch(props.date, date => {
    //   console.log(date)
    // })
    // 监听props参数时下面该写法才会生效
    watch(
      () => props.date, 
      date => {
        setOneRowDate(date)
      }
    )
    const onDateSelect = v => {
      const date = new Date(`${v.y}-${v.m}-${v.d}`)
      emit('update:date', date)
      setOneRowDate(date)
    }

    return{
      dateList,
      onDateSelect
    }
  }
}
</script>

<style lang="less" scoped>
.yk-calendar{
  box-shadow: 0 0.2rem 0.2rem rgba(0,0,0,.05);
  padding-bottom: 1.5rem;
  position: relative;
  .day, .date{
    display: flex;
    justify-content: center;
    padding: 0 1rem;
    text-align: center;
    span{
      flex: 1;
    }
  }
  .day{
    font-size: 0.75rem;
  }
  .date{
    font-weight: bold;
    font-size: 0.875rem;
    span{
      display: inline-block;
      height: 2.8rem;
      line-height: 2.8rem;
    }
  }
  .gray{
    color: #aaa;
  }
  .pull-btn{
    position: absolute;
    bottom: .5rem;
    left: 50%;
    width: 1.2rem;
    display: block;
    margin-left: -.6rem;
    &::before, &::after{
      content: '';
      display: block;
      width: 100%;
      height: 0.125rem;
      background: #e1e1e1;
    }
    &::after{
      width: .7rem;
      margin-left: .25rem;
      border-radius: 0.12rem;
      margin-top: .1rem;
    }
  }
  .actived{
    span{
      width: 2rem;
      height: 2rem;
      line-height: 1.8rem;
      margin-top: .2rem;
      display: inline-block;
      border-radius: 50%;
      .btn-realistic-style();
      position: relative;
      &::after{
        content: '';
        display: block;
        width: .25rem;
        height: .25rem;
        border-radius: 50%;
        background: @primary-color;
        bottom: .1rem;
        left: 50%;
        margin-left: -.13rem;
        position: absolute;
      }
    }
  }
}
</style>